<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 设置全局样式,把外边框和内边框给去掉 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #main {
        height: 420px;
        width: 360px;
        /* 边框的大小颜色和边框的样式(线/虚线等等) */
        border: 10px #000 solid;
        background-color: #b7d4a8;
        /* 改变其边框的椭圆程度 */
        border-radius: 20px;
        /* 外边距 上下50px 左右auto 实现居中效果 */
        margin: 50px auto;
      }
      /* 设置游戏主窗口的样式 */
      #stage {
        width: 304px;
        height: 304px;
        border: 2px solid #000;
        margin: 20px auto;
        /* 开启相对定位 */
        position: relative;
      }
      #snake > div {
        width: 10px;
        height: 10px;
        background-color: #000;
        position: absolute;
      }
      /*设置贪吃蛇食物的样式, */
      #food {
        width: 10px;
        height: 10px;
        /* 开启绝对定位,让其移动的时候的空间会依照stage主窗口为相对来进行移动  */
        position: absolute;
        top: 100px;
        left: 100px;
        /* 如果不设置弹性盒让其内的元素限制在内,会导致一个元素的塌陷. */
        display: flex;
        /* 再让他自动换行 ,刚好填满元素格*/
        flex-flow: wrap;
      }
      #food > div {
        width: 5px;
        height: 5px;
        background-color: #000;
        /* 让其旋转45度 */
        transform: rotate(45deg);
      }
      #info {
        /* 将其与上面的窗口对其 */
        width: 304px;
        /* 设置外边距让其与上面的窗口离的远一点,然后水平居中! */
        margin: 30px auto;
        /* 水平排列 */
        display: flex;
        /* 
        space-between
        在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
        */
        justify-content: space-between;
        /* 设置字体样式 */
        font: bold 20px courier;
      }
    </style>
  </head>
  <body>
    <!-- main 主要 -->
    <div id="main">
      <!-- stage 舞台,游戏运行的主窗口 -->
      <div id="stage">
        <div id="snake">
          <div></div>
        </div>
        <div id="food">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <!-- info 信息 -->
      <div id="info">
        <!-- 分别创造分数和等级 -->
        <div>score <span id="score"></span></div>
        <div>level <span id="level"></span></div>
      </div>
    </div>
    <script>
      // 获取蛇和蛇的各个元素
      //   蛇的容器
      const snake = document.getElementById('snake');
      //   蛇的各个部位
      const snakes = snake.getElementsByTagName('div');
      const food = document.getElementById('food');
      //   蛇头
      const head = snakes[0];

      /* 
        改变事物的位置
        利用随机生成一个数字再去*10
        Math.random()随机生成一个数字0-1的伪随机浮点数
        乘以30
        再给予取整后再乘以10以获得10-290的随机数
        让其生成的随机数+永远没有个位数并且把生成的随机浮点数给取整了
        设置为food的left和top偏移量轴
        */

      const changeFood = () => {
        const x = Math.floor(Math.random() * 30) * 10;
        const y = Math.floor(Math.random() * 30) * 10;
        food.style.left = x + 'px';
        food.style.top = y + 'px';
      };

      let dir;
      //  防止因为输入其他不是判断以外的键盘值导致无法移动蛇
      /* 
        用变量存储,我们要使用的四个方向的值,然后利用数组的方法,
        if来判断key的值是否是我们要的,不要的划,就不去赋值,这样我们的计时器就可以一直运转
 1     */
      const keyArr = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
      document.addEventListener('keydown', (event) => {
        if (keyArr.includes(event.key)) {
          dir = event.key;
        }
      });
      setTimeout(
        (move = () => {
          switch (dir) {
            // 向各个位置移动
            case 'ArrowUp':
              head.style.top = head.offsetTop - 10 + 'px';
              break;
            // 向各个位置移动
            case 'ArrowDown':
              head.style.top = head.offsetTop + 10 + 'px';
              break;
            // 向各个位置移动
            case 'ArrowLeft':
              head.style.left = head.offsetLeft - 10 + 'px';
              break;
            // 向各个位置移动
            case 'ArrowRight':
              head.style.left = head.offsetLeft + 10 + 'px';
              break;
          }
          if (head.offsetTop === food.offsetTop && head.offsetLeft === food.offsetLeft) {
            changeFood();
            snake.insertAdjacentHTML('beforeend', '<div/>');
          }
          setTimeout(move, 300);
        }),
        300
      );
    </script>
  </body>
</html>
